import "@/views/login/index.less";
import loginLeft from "@/assets/images/login_left.png";
import logo from "@/assets/images/logo.png";
import LoginForm from "./components/LoginForm";
import SwitchDark from "@/components/SwitchDark";
import { ConfigProvider, theme } from "antd";
import { useSelector } from "react-redux";
const Login = () => {
  const them = useSelector((state: any) => state.global.theme);
  return (
    <div className='login-container'>
      <ConfigProvider
        theme={{
          // 1. 单独使用暗色算法
          algorithm:
            them === "default" ? theme.defaultAlgorithm : theme.darkAlgorithm,
        }}
      >
        <SwitchDark />
        <div className='login-box'>
          <div className='login-left'>
            <img src={loginLeft} alt='login' />
          </div>
          <div className='login-form'>
            <div className='login-logo'>
              <img className='login-icon' src={logo} alt='logo' />
              <span className='logo-text'>Hooks-Admin</span>
            </div>
            <LoginForm />
          </div>
        </div>
      </ConfigProvider>
    </div>
  );
};

export default Login;
